function Banner(imgArr, seletor  , time) {
    this.time = time ;
    this.imgArr = imgArr;
    this.oBanner = document.querySelector(seletor);
    this.oUl = this.oBanner.querySelector('ul');
    this.oOl = this.oBanner.querySelector('ol');
    //翻页
    this.index = 0;
    //定时器
    this.t = null;

    this.renderList() ;
    this.oUlLis = this.oUl.querySelectorAll('li');
    this.oOlLis = this.oOl.querySelectorAll('li');
    this.cc() ;
    this.autoPlay()
    }

    // }
    //生成图片和小点
    Banner.prototype.renderList = function () {
        let imgHTML = '';
        let dotHTML = '';
        this.imgArr.forEach((v, i) => {
            imgHTML += `<li><img src="${v}"></li>`
            dotHTML += `<li class="dot" index=${i}>${i+1}</li>`
        })
        this.oUl.innerHTML = imgHTML;
        this.oOl.innerHTML = dotHTML;
        const oUlLis = this.oUl.querySelectorAll('li');
        const oOlLis = this.oOl.querySelectorAll('li');
        oUlLis[0].classList.add('show');
        oOlLis[0].classList.add('active');;
    }

    //自动播放
    Banner.prototype.autoPlay = function() {
        this.t = setInterval(() => {
            this.index++;
            if (this.index === this.oUlLis.length) {
                this.index = 0;
            }
            this.show()
        }, this.time)
    }

    //显示当前图片的对应小点
    Banner.prototype.show = function() {
        // 清除所有，显示当前
        this.oUlLis.forEach((v, i) => {
            v.classList.remove('show');
            this.oOlLis[i].classList.remove('active');
        })
        this.oUlLis[this.index].classList.add('show');
        this.oOlLis[this.index].classList.add('active');
    }
    //事件委托 手动切换
    Banner.prototype.cc = function() {
        this.oBanner.onclick =  (e) => {

            const ev = e || event;
            const target = ev.target || ev.srcElement;
            // 上翻页
            if (target.id === 'prev') {
                clearInterval(this.t);
                if (this.index === 0) {
                    this.index = this.oUlLis.length
                }
                this.index--;
                this.show()
                this.autoPlay()
                return
            }
            // 下翻页
            if (target.id === 'next') {
                clearInterval(this.t);
                if (this.index === this.oUlLis.length - 1) {
                    this.index = -1
                }
                this.index++;
                this.show()
                this.autoPlay()
                return
            }
            // 小点切换
            if (target.className === 'dot') {
                clearInterval(this.t);
                this.index = target.getAttribute('index');
                this.show();
                this.autoPlay()
            }
        }
    }
   